<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13_语法-v-bind绑定属性</title>
  <!-- 
  在 Vue 中， `v-bind`  指令用于动态绑定 HTML 元素的属性。通过  `v-bind` ，你可以将数据属性的值绑定到元素的属性上，从而实现数据与视图的同步。
  1. 基本用法
  `v-bind`  的基本语法如下：
  <template>
    <div>
      <img v-bind:src="imageSrc" alt="描述文本">
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        imageSrc: 'https://example.com/image.jpg',
      };
    },
  };
  </script>
  在这个例子中， `v-bind:src`  将  `imageSrc`  数据属性的值绑定到  `<img>`  元素的  `src`  属性上。

  2. 简写语法
  `v-bind`  可以使用简写语法，即只写冒号  `:` ，效果与  `v-bind`  相同：
  <img :src="imageSrc" alt="描述文本">
  3. 绑定多个属性

  可以使用  `v-bind`  绑定多个属性，通常使用对象语法来实现：
  <template>
    <div>
      <img v-bind="{ src: imageSrc, alt: imageAlt }">
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        imageSrc: 'https://example.com/image.jpg',
        imageAlt: '描述文本',
      };
    },
  };
  </script>
  在这个例子中， `v-bind`  通过对象语法同时绑定了  `src`  和  `alt`  属性。

  4. 动态类和样式绑定
  `v-bind`  还可以用于动态绑定 CSS 类和内联样式：

  - 动态类绑定：
  <template>
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        isActive: true,
        hasError: false,
      };
    },
  };
  </script>
  - 动态样式绑定：
  <template>
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        textColor: 'red',
        fontSize: 16,
      };
    },
  };
  </script>
  5. 绑定 HTML 属性
  `v-bind`  可以绑定任何 HTML 属性，包括自定义属性。例如：
  <template>
    <div v-bind:data-id="itemId"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        itemId: 123,
      };
    },
  };
  </script>

  6. 注意事项
  - 响应式：使用  `v-bind`  绑定的属性会随着数据的变化而自动更新。
  - 布尔属性：对于布尔属性（如  `disabled` 、 `checked` ）， `v-bind`  可以接收一个布尔值，若为  `true` ，则属性存在；若为  `false` ，则属性不存在。

  总结

  -  `v-bind`  指令：用于动态绑定 HTML 元素的属性。
  - 简写语法：可以使用冒号  `:`  作为简写。
  - 绑定多个属性：可以通过对象语法绑定多个属性。
  - 动态类和样式：可用于动态绑定 CSS 类和内联样式。
  - 响应式：绑定的属性会随着数据变化而自动更新。
  -->
  <style>
    .active {
      color: red;
    }

  </style>
</head>
<body>

  <div id="app">
    <!-- 1. 基本数据类型 -->
    <h2>1. 基本数据类型</h2>
    <a v-bind:href="urlBase">百度</a>
    <img :src="showImgUrl" alt="">
    <button @click="switchImage">切换图片</button>

    <!-- 2. 对象语法 -->
    <h2>2. class属性对象语法</h2>
    <button :class="isActive ? 'active': ''" @click="btnClick">我是对象语法按钮1</button>
    <!-- 2.1.对象语法的基本使用(掌握) -->
    <button :class="{ active: isActive }" @click="btnClick">我是对象语法按钮2</button>
    <!-- 2.2.对象语法的多个键值对 -->
    <button lass="abc cba" :class="{ active: isActive, more: false }" @click="btnClick">我是对象语法按钮3</button>
    <!-- 2.4.动态绑定的class是可以和普通的class同时的使用 -->
    <button class="abc cba" :class="getDynamicClasses()" @click="btnClick">我是对象语法按钮4</button>

    <!-- 3. 数组语法 -->
    <h3>3. class属性数组语法</h3>
    <button :class="['abc', isActive ? 'active' : '']" @click="btnClick">我是数组语法按钮</button>
    <button :class="['abc', className, isActive ? 'active' : '']" @click="btnClick">我是数组语法按钮</button>
    <button :class="['abc', {active: isActive, more: false}]" @click="btnClick">我是数组语法按钮</button>

    <!-- 4. style属性 -->
    <h3>4. style属性</h3>
    <button :style="{ color: isActive ? 'red' : 'blue' }" @click="btnClick">我是style属性按钮</button>
    <button :style="[objStyle, fontSize]" @click="btnClick">我是style属性按钮</button>
    <button :style="[objStyle, { backgroundColor: 'purple' }]" @click="btnClick">我是style属性按钮</button>

  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, reactive } = Vue

    const app = createApp({
      setup() {
        const urlBase = ref('https://www.baidu.com')
        const showImgUrl = ref('http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg')
        const imgUrl1 = ref("http://p1.music.126.net/agGc1qkogHtJQzjjyS-kAA==/109951167643767467.jpg")
        const imgUrl2 = ref("http://p1.music.126.net/_Q2zGH5wNR9xmY1aY7VmUw==/109951167643791745.jpg")

        const isActive = ref(false)
        const className = ref('cba')

        const fontSize = ref('20px')
        const objStyle = reactive({
          color: 'red',
          fontSize: '30px'
        })

        function btnClick() {
          isActive.value = !isActive.value
        }

        function switchImage() {
          showImgUrl.value = showImgUrl.value === imgUrl1.value ? imgUrl2.value : imgUrl1.value
        }

        function getDynamicClasses() {
          return { active: isActive.value, more: false }
        }

        return {
          urlBase,
          showImgUrl,
          switchImage,

          isActive,
          btnClick,
          getDynamicClasses,
          className,

          objStyle,
          fontSize
        }
      }
    })

    app.mount('#app')

  </script>
  
</body>
</html>